window.addEventListener('load', function () {
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 获得focus的宽度
    var w = focus.offsetWidth;
    // 利用定时器自动轮播图片
    var curIndex = 0;
    var timer;
    timer = setInterval(function () {
        curIndex++;
        var translatex = -curIndex * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    // 监听过渡完成的事件
    ul.addEventListener('transitionend', function () {
        // 无缝滚动
        if (curIndex >= 5) {
            curIndex = 0;
            // 去掉过渡效果
            ul.style.transition = 'none';
            var translatex = -curIndex * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        else if (curIndex < 0) {
            curIndex = 4;
            ul.style.transition = 'none';
            var translatex = -curIndex * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 小圆点跟随变化
        ol.querySelector('.current').classList.remove('current');
        ol.children[curIndex].classList.add('current');
    });

    // 手指滑动轮播图
    // 触摸元素 touchstart 获取手指初始坐标
    var startX = 0;
    var moveX = 0;
    var flage = false;
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    })
    // 移动手指 touchmove 计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;
        // 不需要过渡效果
        ul.style.transition = 'none';
        // 移动盒子 
        var translatex = -curIndex * w + moveX;
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flage = true; //如果用户手指移动过再去判断，否则不做判断
        e.preventDefault() //阻止滚动屏幕的行为
    })
    // 手指离开，根据移动距离判断是回弹还是播放上一张下一张
    ul.addEventListener('touchend', function (e) {
        // 如果移动距离大于50像素就播放上一张或者下一张
        if (flage) {
            if (Math.abs(moveX) > 50) {
                // 右滑 --> 下一张 moveX是正值
                if (moveX > 0) {
                    curIndex--;
                }
                // 左滑 --> 上一张 moveX是负值
                else {
                    curIndex++;
                }
                var translatex = -curIndex * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
            else {
                var translatex = -curIndex * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
            clearInterval(timer);
            timer = setInterval(function () {
                curIndex++;
                var translatex = -curIndex * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }, 2000);
        }

    });

    // 返回顶部模块制作
    var goBack = document.querySelector('.goBack')
    var nav = document.querySelector('nav')
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= nav.offsetTop) {
            goBack.style.display = 'block'
        } else {
            goBack.style.display = 'none'
        }
    })
    goBack.addEventListener('click', function () {
        window.scroll(0, 0)
    })
})